<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理页面</title>
    <link rel="stylesheet" href="../../res/css/user.css" />
    <link rel="stylesheet" href="../../res/layui/css/layui.css" />
    <script type="text/javascript" src="../../res/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="../../res/layui/layui.js"></script>
    <script type="text/javascript" src="../../res/js/sweetalert2.js"></script>
</head>
<body>
    <table class="layui-hide" id="demo" lay-filter="test"></table>
<script type="text/html" id="checkboxTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="userResult" value="{{d.userId}}" lay-skin="switch" lay-text="有效|无效" lay-filter="lockDemo" {{ d.userId == 1 ? 'disabled' : '' }} lay-filter="lockDemo" {{ d.userResult == 1 ? 'checked' : '' }} >
</script>
<script type="text/html" id="barDemo">
    {{# if(d.userId!=1) { }}
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    {{# } else{}}
    <a class="layui-btn layui-btn-disabled layui-btn-xs">修改</a>
    {{# } }}
</script>
<!-- 设置时间 -->
<script type="text/javascript">
    $.ajaxSetup({
        async: false
    });

/*    $(function () {
        console.info("=========================================================")
        $("#userSubmit").on("click",function () {
            console.info("进入查询")

        })
    })*/
    function createTime(v){
        var date = new Date(v);
        var y = date.getFullYear();
        var m = date.getMonth()+1;
        m = m<10?'0'+m:m;
        var d = date.getDate();
        d = d<10?("0"+d):d;
        var h = date.getHours();
        h = h<10?("0"+h):h;
        var M = date.getMinutes();
        M = M<10?("0"+M):M;
        var str = y+"-"+m+"-"+d;
        return str;
    }
</script>
    <script type="text/html" id="toolbarDemo">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input type="text" id="userName" name="userName" placeholder="请输入" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="button"class="layui-btn" lay-event="userSubmit" id="userSubmit" value="查询"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="button"class="layui-btn" lay-event="userAdd" id="userAdd" value="新增"/>
                    </div>
                </div>
            </div>
    </script>
<script>
    var table2=null
    layui.use('table', function(){
        var table = layui.table,
            form=layui.form;
    //执行一个 table 实例
        table2=table.render({
        elem: '#demo'
        ,height: 520
        ,url: '../../user/findAll.form' //数据接口
        ,title: '用户表'
        ,page: true //开启分页
        ,toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
        ,totalRow: false //开启合计行
        ,cols: [[ //表头
            {type: 'checkbox', fixed: 'left'}
            ,{field: 'userId', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计：'}
            ,{field: 'userName', title: '用户名', width:80}
            ,{field: 'userPhone', title: '手机号', width: 90}
            ,{field: 'userMail', title: '邮箱', width:80}
            ,{field: 'userResult', title: '是否有效', width:110, templet: '#checkboxTpl', unresize: true}
            ,{field: 'userSort', title: '排序', width:150, sort: true}
            ,{field: 'userCreateDate', title: '创建时间', width: 200,templet :function (row){return createTime(row.userCreateDate)}}
            ,{field: 'userCreateUser', title: '创建人', width: 100}
            ,{fixed: 'right',title: '修改', width: 165, align:'center', toolbar: '#barDemo'}
        ]]
    });
        //监听效果操作
        form.on('switch(lockDemo)', function(obj){
            Swal.fire({
                title: '是否修改此状态？',
                text: "是否要修改这条数据的状态吗？",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: '修改',
                cancelButtonText: '取消'
            }).then((result) => {
                if (result.value) {
                    var data={userId:this.value,userResult:0};
                    if(obj.elem.checked){
                        data.userResult=1;
                    }
                    var url ="../../user/result.form";
                    $.post(url,data,function (objs) {
                        if(objs==1){
                            Swal.fire(
                                '成功！',
                                '修改成功!',
                                'success'
                            )
                        }else{
                            Swal.fire({
                                type: 'error',
                                title: '错误！',
                                text: '修改失败'
                            })
                        }

                    },"json");
                }else{
                $(".layui-laypage-btn").click()
            }
            })

        })

        //监听头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
                case 'userSubmit':
                    table2.reload({
                        url:"../../user/findAll.form",
                        where : {
                            userName:$("#userName").val()
                        },
                        page : {
                            curr : 1
                        }

                    })
                    break;
                case 'userAdd':
                    layer.open({
                        type: 2,
                        title: '操作',
                        shadeClose: true,
                        shade: false,
                        maxmin: true, //开启最大化最小化按钮
                        area: ['893px', '600px'],
                        content: 'userForm.html'
                    });
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'edit'){
                layer.msg('编辑操作');
                layer.open({
                    type: 2,
                    title: '操作',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['893px', '600px'],
                    content: 'userForm.html?userId='+data.userId
                });
            }
        });


    });


</script>
</body>
</html>